<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width" />
    <meta name="author" content="www.yanshisan.cn" />
    <meta name="robots" content="all" />
    <title>文章</title>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="layui/css/layui.css" />
    <link rel="stylesheet" href="css/master.css" />
    <link rel="stylesheet" href="css/gloable.css" />
    <link rel="stylesheet" href="css/nprogress.css" />
    <link rel="stylesheet" href="css/blog.css" />
</head>
<body>
    <div class="header">
    </div>
    <header class="gird-header">
        <div class="header-fixed">
            <div class="header-inner">
                <a href="javascript:void(0)" class="header-logo" id="logo">Mr.Yss</a>
                <nav class="nav" id="nav">
                    <ul>
                        <li><a href="index.html">首页</a></li>
                        <li><a href="articleIndex.html">博客</a></li>
                        <li><a href="message.html">留言</a></li>
                        <li><a href="link.html">友链</a></li>
                    </ul>
                </nav>
                <a href="/User/QQLogin" class="blog-user">
                    <i class="fa fa-qq"></i>
                </a>
                <a class="phone-menu">
                    <i></i>
                    <i></i>
                    <i></i>
                </a>
            </div>
        </div>
    </header>
    <div class="doc-container" id="doc-container">
        <div class="container-fixed">
		    <div class="col-content">
		        <div class="inner" id="IndexArticles">

		        </div>
		    </div>
		    <div class="col-other">
		        <div class="inner">
					<div class="other-item" id="categoryandsearch">
			    		<div class="search">
					        <label class="search-wrap">
					            <input type="text" id="searchtxt" placeholder="输入关键字搜索" />
					            <span class="search-icon">
					                <i class="fa fa-search"></i>
					            </span>
					        </label>
			        		<ul class="search-result"></ul>
			    		</div>
			    		<ul class="category mt20" id="category">
				        	<li data-index="0" class="slider"></li>
				        	<li data-index="1"><a href="articleIndex.html">全部文章</a></li>
							<li data-index="2"><a href="/Blog/Article/1/">个人日记</a></li>
							<li data-index="3"><a href="/Blog/Article/2/">HTML5&amp;CSS3</a></li>
							<li data-index="4"><a href="/Blog/Article/3/">JavaScript</a></li>
							<li data-index="5"><a href="/Blog/Article/4/">ASP.NET MVC</a></li>
							<li data-index="6"><a href="/Blog/Article/5/">其它</a></li>

			    		</ul>
					</div>
					<!--右边悬浮 平板或手机设备显示-->
					<div class="category-toggle"><i class="layui-icon">&#xe603;</i></div>
					<div class="article-category">
					    <div class="article-category-title">分类导航</div>

					    <div class="f-cb"></div>
					</div>
					<!--遮罩-->
					<div class="blog-mask animated layui-hide"></div>
					<div class="other-item">
					    <h5 class="other-item-title">最新文章</h5>
					    <div class="inner">
					        <ul class="hot-list-article" id="newestArticles">
					                <li> <a href="/Blog/Read/9">2018最新版QQ音乐api调用</a></li>

					        </ul>
					    </div>
					</div>
					<div class="other-item">
					    <h5 class="other-item-title">置顶推荐</h5>
					    <div class="inner">
					        <ul class="hot-list-article">
					                <li> <a href="/Blog/Read/16">.NET Spire.Doc组件</a></li>
					                <li> <a href="/Blog/Read/14">MUI框架-快速开发APP</a></li>
					                <li> <a href="/Blog/Read/9">2018最新版QQ音乐api调用</a></li>
					        </ul>
					    </div>
					</div>
					<div class="other-item">
					    <h5 class="other-item-title">最近访客</h5>
					    <div class="inner">
					        <dl class="vistor">
					                <dd><a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/72388EA977643E8F97111222675720B1/100"><cite>Anonymous</cite></a></dd>
					                <dd><a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/342F777E313DDF5CCD6E3E707BB0770B/100"><cite>Dekstra</cite></a></dd>
					                <dd><a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/EA5D00A72C0C43ECD8FC481BD274DEEC/100"><cite>惜i</cite></a></dd>
					                <dd><a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/EF18CEC98150D2442183AA30F05AAD7B/100"><cite>↙Aㄨ计划 ◆莪↘</cite></a></dd>
					                <dd><a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/3D8D91AD2BAFD36F5AC494DA51E270E6/100"><cite>.</cite></a></dd>
					                <dd><a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/B745A110DAB712A0E6C5D0B633E905D3/100"><cite>Lambert.</cite></a></dd>
					                <dd><a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/E9BA3A2499EC068B7917B9EF45C4D13C/100"><cite>64ღ</cite></a></dd>
					                <dd><a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/09F92966169272DD7DD9999E709A0204/100"><cite>doBoor</cite></a></dd>
					                <dd><a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/59991D53192643A1A651383847332EB6/100"><cite>毛毛小妖</cite></a></dd>
					                <dd><a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/FF34F311DDC43E2AF63BE897BCA24F05/100"><cite>NULL</cite></a></dd>
					                <dd><a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/59AA25A7627284AE62C8E6EBDC6FE417/100"><cite>吓一跳</cite></a></dd>
					                <dd><a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/28B021E0F5AF0A4B9B781A24329FE897/100"><cite>如初</cite></a></dd>
					        </dl>
					    </div>
					</div>
		        </div>
		    </div>
		</div>
    </div>
    <footer class="grid-footer">
        <div class="footer-fixed">
            <div class="copyright">
                <div class="info">
                    <div class="contact">
                        <a href="javascript:void(0)" class="github" target="_blank"><i class="fa fa-github"></i></a>
                        <a href="https://wpa.qq.com/msgrd?v=3&uin=930054439&site=qq&menu=yes" class="qq" target="_blank" title="930054439"><i class="fa fa-qq"></i></a>
                        <a href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=gbiysbG0tbWyuMHw8K-i7uw" class="email" target="_blank" title="930054439@qq.com"><i class="fa fa-envelope"></i></a>
                        <a href="javascript:void(0)" class="weixin"><i class="fa fa-weixin"></i></a>
                    </div>
                    <p class="mt05">
                        Copyright &copy; 2018-2018 燕十三 All Rights Reserved V.1.0.0 蜀ICP备18008600号
                    </p>
                </div>
            </div>
        </div>
    </footer>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script src="layui/layui.js"></script>
    <script src="js/yss/gloable.js"></script>
    <script src="js/plugins/nprogress.js"></script>
    <script>NProgress.start();</script>
 	<script src="js/yss/article.js"></script>
    <script>
        window.onload = function () {
            NProgress.done();
        };
    </script>
    <script>
        var Indexarticles=JSON.parse($.ajax({
            url:"http://back.caidabao.website/article/index",
            async: false,
            type:"GET"
        }).responseText);
        var articleStr='';
        for (var i = 0; i <Indexarticles.length ; i++) {
            var date=new Date(Indexarticles[i].createTime);
            var year=date.getFullYear();
            var month=date.getMonth()+1;
            var day=date.getDate();
			articleStr+=' <article  >\n' +
                '<section class="article-item zoomIn article">\n' +
                '<h5 class="title">       \n' +
                '<a href="/portal/read.html?id='+Indexarticles[i].id+'">'+Indexarticles[i].articleTitle+'</a>   \n' +
                '</h5>   \n' +
				'<div class="time">       \n' +
                '\t\t\t\t\t\t\t\t<span class="day">'+day+'</span>       \n' +
                '\t\t\t\t\t\t\t\t<span class="month fs-18">'+month+'<span class="fs-14">月</span></span>       \n' +
                '\t\t\t\t\t\t\t\t<span class="year fs-18 ml10">'+year+'</span>   \n' +
                '\t\t\t\t\t\t\t</div> '+
                '<div class="content">       \n' +
                Indexarticles[i].articleDesc+
                '</div>   \n' +
                '<div class="read-more">       \n' +
                '<a href="/portal/read.html?id='+Indexarticles[i].id+'" class="fc-black f-fwb">继续阅读</a>   \n' +
                '</div>    \n' +
                '<aside class="f-oh footer">       \n' +
                '<div class="f-fl tags">           \n' +
                '<span class="fa fa-tags fs-16"></span>           \n' +
                '<a class="tag">'+Indexarticles[i].categoryDesc+'</a>       \n' +
                '</div>       \n' +
                '<div class="f-fr">           \n' +
                '<span class="read">               \n' +
                '<i class="fa fa-eye fs-16"></i>               \n' +
                '<i class="num">'+Indexarticles[i].articleViewTimes+'</i>           \n' +
                '</span>           \n' +
                '<span class="ml20">               \n' +
                '<i class="fa fa-comments fs-16"></i>               \n' +
                '<a href="javascript:void(0)" class="num fc-grey">1</a>           \n' +
                '</span>       \n' +
                '</div>   \n' +
                '</aside>\n' +
                '</section>\n' +
                ' </article>';
        }
        $("#IndexArticles").html(articleStr);
    </script>

    <!--查询categoryid及desc-->
    <script>
        var Categories=JSON.parse($.ajax({
            url:"http://back.caidabao.website/category",
            async: false,
            type:"GET"
        }).responseText);
        var categoryStr='<li data-index="1"><a href="articleIndex.html">全部文章</a></li>';
        for (var i = 0; i <Categories.length ; i++) {
            var num=i+2;
			categoryStr+='<li data-index="'+num+'"><a onclick="findArticleByCategory('+Categories[i].categoryId+')">'+Categories[i].categoryDesc+'</a></li>';
        }
        $("#category").html(categoryStr);
	</script>

    <!--最新的文章获取-->
    <script>
		var newestArticles=JSON.parse($.ajax({
			url:"http://back.caidabao.website/article/newestArticles",
			async: false,
			type:"GET"
		}).responseText);
		var newesrArticlesStr='';
        for (var i = 0; i <newestArticles.length ; i++) {
			newesrArticlesStr+='<li> <a href="http://back.caidabao.website/portal/read.html?id='+newestArticles[i].id+'">'+newestArticles[i].articleTitle+'</a></li>';
        }
        $("#newestArticles").html(newesrArticlesStr);
	</script>

	<!--findArticleByCategoryId-->
    <script>
		var findArticleByCategory=function (categoryId) {
            var articles=JSON.parse($.ajax({
                url:"http://back.caidabao.website/article/category/"+categoryId,
                async: false,
                type:"GET"
            }).responseText);
            var funViewTimes=function (articleId) {
                var viewTimes= $.ajax({
                    url:"http://back.caidabao.website/article/articleViewTimes/"+articleId,
                    async: false,
                    type:"GET"
                }).responseText;
                return viewTimes.substring(0,viewTimes.length-2);
            }
            var articleStr='';
            for (var i = 0; i <articles.length ; i++) {
                var date=new Date(articles[i].createTime);
                var year=date.getFullYear();
                var month=date.getMonth()+1;
                var day=date.getDate();
                articleStr+=' <article  >\n' +
                    '<section class="article-item zoomIn article">\n' +
                    '<h5 class="title">       \n' +
                    '<a href="/portal/read.html?id='+articles[i].id+'">'+articles[i].articleTitle+'</a>   \n' +
                    '</h5>   \n' +
                    '<div class="time">       \n' +
                    '\t\t\t\t\t\t\t\t<span class="day">'+day+'</span>       \n' +
                    '\t\t\t\t\t\t\t\t<span class="month fs-18">'+month+'<span class="fs-14">月</span></span>       \n' +
                    '\t\t\t\t\t\t\t\t<span class="year fs-18 ml10">'+year+'</span>   \n' +
                    '\t\t\t\t\t\t\t</div> '+
                    '<div class="content">       \n' +
                    articles[i].articleDesc+
                    '</div>   \n' +
                    '<div class="read-more">       \n' +
                    '<a href="/portal/read.html?id='+articles[i].id+'" class="fc-black f-fwb">继续阅读</a>   \n' +
                    '</div>    \n' +
                    '<aside class="f-oh footer">       \n' +
                    '<div class="f-fl tags">           \n' +
                    '<span class="fa fa-tags fs-16"></span>           \n' +
                    '<a class="tag">'+articles[i].categoryDesc+'</a>       \n' +
                    '</div>       \n' +
                    '<div class="f-fr">           \n' +
                    '<span class="read">               \n' +
                    '<i class="fa fa-eye fs-16"></i>               \n' +
                    '<i class="num">'+funViewTimes(articles[i].id)+'</i>           \n' +
                    '</span>           \n' +
                    '<span class="ml20">               \n' +
                    '<i class="fa fa-comments fs-16"></i>               \n' +
                    '<a href="javascript:void(0)" class="num fc-grey">1</a>           \n' +
                    '</span>       \n' +
                    '</div>   \n' +
                    '</aside>\n' +
                    '</section>\n' +
                    ' </article>';
            }
            $("#IndexArticles").html(articleStr);
        }

	</script>


</body>
</html>
